<!-- 对 divider 组件的编辑 -->
<template>
  <div class="textarea-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="设置" name="1">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="显示结构" style="margin-bottom:0px;">
                    <el-radio-group v-model="data.config.framework">
                      <el-radio :label="1">上下结构</el-radio>
                      <el-radio :label="2">左右结构</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col v-if="data.config.framework === 2" :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="标题宽度" style="margin-bottom:0px;">
                    <el-input size="mini" style="width: 110px;" v-model="data.config.textWidth">
                    </el-input>
                    &nbsp;&nbsp;<span class="tip-color"> 单位：em </span>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="输入框宽度" style="margin-bottom:0px;">
                    <el-input @blur="blurInputWidth" size="mini" style="width: 110px;" v-model="data.config.inputWidth">
                    </el-input>
                    &nbsp;&nbsp;<span class="tip-color"> 单位：% </span>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="输入框高度" style="margin-bottom:0px;">
                    <el-input @blur="blurInputHeight" size="mini" style="width: 110px;"
                      v-model="data.config.inputHeight">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12">
                <PaddingTop :defValue="data.config.paddingTop" :chgValue="(d)=>{data.config.paddingTop = d}"
                  :formLabelWidth="formLabelWidth" />
              </el-col>
              <el-col :span="12">
                <PaddingBottom :defValue="data.config.paddingBottom" :chgValue="(d)=>{data.config.paddingBottom = d}"
                  :formLabelWidth="formLabelWidth" />
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="标题文字" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.text.label" maxlength="300" placeholder="输入标题文字名称">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="提示文本" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.text.placeholder" maxlength="300" placeholder="默认情况下显示">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="规则" name="2">
            <el-row :gutter="30">
              <el-col :span="8">
                <el-form :label-width="formLabelWidth">
                  <el-form-item label="输入必填" style="margin-bottom:0px;">
                    <el-switch v-model="required.value" active-color="#13ce66" active-text="是" inactive-text="否">
                    </el-switch>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="16">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="警告内容" style="margin-bottom:0px;">
                    <el-input :disabled="!(required.value > 0)" size="mini" v-model="required.defaultMessage">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="8">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="最大长度" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="maxlength.value" type="number" onkeyup="value=value.replace(/[^\d]/g,'')">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="16">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="警告内容" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="maxlength.defaultMessage">
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>

import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTFORMTEXTAREA, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      this.data.config.inputWidth = parseFloat(this.data.config.inputWidth).toFixed(2)

      this.data.rules = initRules(this.data.text.label, _.cloneDeep(this.data))

      if (this.data.rules && this.data.rules.length > 0) {
        this.required = this.data.rules.find(element => {
          return element.rule === 'required'
        })
      }

      this.required.value = parseInt(this.data.config.required) === 1

      if (this.data.rules && this.data.rules.length > 0) {
        this.maxlength = this.data.rules.find(element => {
          return element.rule === 'maxlength'
        })
      }

      this.$nextTick(() => {
        if (this.$refs['settingComponentDialog']) {
          this.$refs['settingComponentDialog'].open()
        }
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '90px',
      name: '多行文本框',
      bjComponent: null,
      data: null,
      activeName: '1',
      // 必填规则项
      required: {
        rule: 'required',
        value: false,
        defaultMessage: '不能为空'
      },
      // 长度规则项
      maxlength: {
        rule: 'maxlength',
        value: '500',
        defaultMessage: '不能超过500长度'
      }
    }
  },
  methods: {
    blurInputWidth () {
      let inputWidth = parseFloat(this.data.config.inputWidth).toFixed(2)
      if (isNaN(parseFloat(inputWidth)) || parseFloat(inputWidth) > 100 || parseFloat(inputWidth) < 1) {
        inputWidth = '100.00'
      }
      this.data.config.inputWidth = '' + inputWidth
    },
    blurInputHeight () {
      let inputHeight = this.data.config.inputHeight
      if (isNaN(parseInt(inputHeight))) {
        inputHeight = ''
      } else {
        if (/^(\d|\.)+(em|rem)$/.test(inputHeight)) {
        } else {
          inputHeight = parseInt(inputHeight) + 'px'
        }
      }
      this.data.config.inputHeight = '' + inputHeight
    },
    // .............
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
      this.activeName = '1'
      // 必填规则项
      this.required = {
        rule: 'required',
        value: false,
        defaultMessage: '不能为空'
      }
      // 长度规则项
      this.maxlength = {
        rule: 'maxlength',
        value: '500',
        defaultMessage: '不能超过500长度'
      }
    },
    saveclose () {
      let data = _.cloneDeep(this.data)
      data.config.required = this.required.value ? 1 : 2
      let inputWidth = parseFloat(data.config.inputWidth).toFixed(2)
      if (isNaN(parseFloat(inputWidth)) || parseFloat(inputWidth) > 100 || parseFloat(inputWidth) < 1) {
        inputWidth = '100.00'
      }
      data.config.inputWidth = '' + inputWidth + '%'
      let index = data.rules.findIndex(element => {
        return element.rule === 'required'
      })
      if (index < 0) {
        console.error('未找到 required 对应的数据！')
        return
      }
      if (this.required.value) {
        if (!this.required.defaultMessage.trim()) {
          this.$message.error('输入设置为必填时，警告内容不能为空！')
          return
        }
      }
      if (this.maxlength.value && this.maxlength.value !== '') {
        if (!this.maxlength.defaultMessage.trim()) {
          this.$message.error('输入设置最大长度时，警告内容不能为空！')
          return
        }
      }
      let required = _.cloneDeep(this.required)
      required.value = '' + (required.value ? 1 : 2)
      data.rules.splice(index, 1, required)
      index = data.rules.findIndex(element => {
        return element.rule === 'maxlength'
      })
      if (index < 0) {
        console.error('未找到 maxlength 对应的数据！')
        return
      }
      data.rules.splice(index, 1, this.maxlength)

      this.bjComponent.render.data = data
      BackendjsFunctions.saveFormComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    PaddingTop,
    PaddingBottom
  }
}

function initRules (label, data) {
  if (!data.rules || data.rules.length < 1) {
    return [
      {
        rule: 'required',
        value: false,
        defaultMessage: label + ' 不能为空'
      },
      {
        rule: 'maxlength',
        value: '500',
        defaultMessage: label + ' 不能超过500长度'
      }
    ]
  }
  return data.rules
}

</script>

<style scoped>
.edit-container-u {
  width: 640px;
  min-height: 250px;
}
</style>
